<template>
  <div id="app">
    <div class="card input">
      <h3>学生成绩填报表</h3>
      <div class="content">
        <div class="item">
          姓名：
          <input type="text" v-model="newStu.name" />
        </div>
        <div class="item">
          性别：
          <input type="text" v-model="newStu.gender" />
        </div>
        <div class="item">
          年龄：
          <input type="number" v-model="newStu.age" />
        </div>
        <div class="item">
          语文：
          <input type="number" v-model="newStu.yw" />
        </div>
        <div class="item">
          数学：
          <input type="number" v-model="newStu.sx" />
        </div>
        <div class="item">
          英语：
          <input type="number" v-model="newStu.yy" />
        </div>
        <div class="item">
          <input type="button" class="btn" value="提交" @click="sumbit" />
        </div>
      </div>
    </div>
    <div class="card" v-for="item in stuData" :key="item.name">
      <Card :student="item" />
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import "../../assets/css/report.css";
import Card from './components/Card.vue';

export default {
  components: {Card},
  setup() {
    const newStu = ref({
      name: "",
      age: 0,
      gender: "",
      head: "",
      yw: 0,
      sx: 0,
      yy: 0,
      show: false,
    });
    const stuData = [
      {
        name: "张三feng",
        age: 20,
        gender: "男",
        head:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2Fc8%2F5d%2F59%2Fc85d595ed206fa63bb7bc7d7d9d17353.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648255399&t=0999eef6cf2f4a0da0f06a37153f3a30",
        yw: 60,
        sx: 100,
        yy: 70,
      },
      {
        name: "李四",
        age: 20,
        gender: "男",
        head:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F36%2Faf%2F84%2F36af84b51d35d4e560fb92fa065fe1d6.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648255399&t=d24abc41a0a5bc533cf0d8e42257a3c1",
        yw: 50,
        sx: 100,
        yy: 40,
      },
      {
        name: "王五",
        age: 20,
        gender: "男",
        head:
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F22%2Fa6%2F5d%2F83%2Fae689318a827319a98788026bb32d99a.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648255399&t=b85a8b7e9a853d96055aab2182fd4379",
        yw: 80,
        sx: 100,
        yy: 60,
      },
    ];
    const sumbit = () => {
      if ((this.newStu.name === "") | (this.newStu.gender === "")) {
        alert("请填写完整！");
        return;
      }
      this.stuData.push(this.newStu.value);
    };
    return {
      stuData,
      newStu,
      sumbit
    };
  },
};
</script>
